<!-- 快速配置搜索栏 -->
<script setup lang="tsx">
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { ElButton, ElScrollbar } from 'element-plus'
import { Icon } from '@/components/Icon'
import { Search } from '@/components/Search'
import { VueDraggable, useDraggable, vDraggable } from 'vue-draggable-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { SetupFormOptionCode, MyFormSchema } from '@/components/SetupFormOptionCode'
import {
  searchFormTypeList,
  SetupSearchFormItem
} from '@/components/SetupFormOptionCode/src/search'
import { useSetupFromOptionStoreWithOut } from '@/store/modules/setupFormOption'
const setupStore = useSetupFromOptionStoreWithOut()
const scrollbarHeight = 400
const searchSchema = ref<MyFormSchema[]>([
  {
    field: 'Input1',
    label: '输入框-1-label',
    component: 'Input',
    componentProps: {
      clearable: false
    }
  }
])

const currentIndex = ref<number | null>(null)
const currentAct = ref<MyFormSchema | undefined>(undefined)
const codeDrawer = ref(false)
let num = 1
function clone(element: Record<'label' | 'value' | 'template', string>) {
  // console.log('element', element)
  num++
  return {
    label: `${element.label}-${num}-label`,
    field: `${element.value}-${num}`,
    component: `${element.value}`,
    template: `${element.template}`
  }
}
const onUpdate = (e) => {
  // console.log(1111, e)
  if (e.oldIndex === currentIndex.value) {
    currentIndex.value = e.newIndex
  } else if (e.newIndex === currentIndex.value) {
    currentIndex.value = e.oldIndex
  }
}
function onAdd(e) {
  // console.log('onAdd', e)
  if (searchSchema.value.length === 1) {
    currentIndex.value = 0
    currentAct.value = searchSchema.value[0]
  } else if (currentIndex.value !== null && e.newIndex <= currentIndex.value) {
    currentIndex.value += 1
  }
}
const searchRef = ref()

function onClickItem(item: MyFormSchema, index: number) {
  currentAct.value = item
  currentIndex.value = index
}
function onClickDel(index: number) {
  searchSchema.value.splice(index, 1)
  if (currentIndex.value !== null && index < currentIndex.value) {
    currentIndex.value -= 1
  } else if (index === currentIndex.value) {
    if (index >= 1) {
      currentIndex.value -= 1
      currentAct.value = searchSchema.value[currentIndex.value]
    } else if (searchSchema.value.length > 0) {
      currentIndex.value = 0
      currentAct.value = searchSchema.value[currentIndex.value]
    } else {
      currentIndex.value = null
      currentAct.value = undefined
    }
  }
  console.log('currentIndex', currentIndex.value)
}
function onClickCode() {
  save()
  codeDrawer.value = true
}
// 存入pinia
function save() {
  const data = searchSchema.value.map((item) => {
    if (item.template) {
      delete item.template
    }
    return item
  })
  setupStore.setSearchForm(data)
}
/**
 * 保存表单配置
 *
 * @param form 表单配置对象
 */
function configSave(form: MyFormSchema) {
  if (currentIndex.value !== null) {
    searchSchema.value[currentIndex.value] = form
  }
}

/** 状态管理器中获取缓存的数据 */
function onPasteFromClipboard() {
  searchSchema.value = setupStore.getSearchForm
}

onMounted(() => {
  onPasteFromClipboard()
  if (searchSchema.value.length > 0) {
    currentIndex.value = 0
    currentAct.value = searchSchema.value[0]
  }
})
onUnmounted(() => {
  setupStore.setForm(searchSchema.value)
})
</script>
<template>
  <div class="flex w-100% h-100%">
    <div class="flex-1 m-r-10px">
      <ContentWrap title="效果展示">
        <ElScrollbar max-height="200px">
          <Search ref="searchRef" :schema="searchSchema" />
        </ElScrollbar>
      </ContentWrap>
      <div class="flex">
        <ContentWrap title="表单选项" class="w-200px">
          <VueDraggable
            v-model="searchFormTypeList"
            :animation="150"
            :group="{ name: 'formSchema', pull: 'clone', put: false }"
            :clone="clone"
            :sort="false"
          >
            <div v-for="item in searchFormTypeList" :key="item.value">
              <ElButton class="cursor-move m-b-10px m-l-0px" type="primary">
                {{ item.label }}-{{ item.value }}
              </ElButton>
            </div>
          </VueDraggable>
        </ContentWrap>
        <ContentWrap title="添加、删除、排序" class="flex-1">
          <template #header>
            <div class="w-100% flex justify-end">
              <ElButton @click="onClickCode" link type="primary">{{ `代码<\/>` }} </ElButton>
            </div>
          </template>
          <ElScrollbar :height="scrollbarHeight">
            <VueDraggable
              v-model="searchSchema"
              :animation="150"
              group="formSchema"
              class="h-400px"
              :onUpdate="onUpdate"
              :onAdd="onAdd"
            >
              <div
                v-for="(item, index) in searchSchema"
                :key="item.field"
                @click="onClickItem(item, index)"
                class="view-search-form cursor-move h-50px rounded p-3 m-b-10px flex justify-between items-center"
                :class="index === currentIndex ? 'act' : ''"
              >
                {{ item.label }}
                <Icon
                  @click.stop="onClickDel(index)"
                  class="cursor-pointer"
                  :size="18"
                  icon="vi-ep:delete-filled"
                  color="#e04548"
                />
              </div>
            </VueDraggable>
          </ElScrollbar>
        </ContentWrap>
        <SetupSearchFormItem
          :currentRow="currentAct"
          @save="configSave"
          :scrollbarHeight="scrollbarHeight"
        />
      </div>
    </div>
    <SetupFormOptionCode v-model="codeDrawer" @pasteFromClipboard="onPasteFromClipboard" />
  </div>
</template>
<style scoped lang="less">
.view-search-form {
  background-color: #f5f5f5;
  border: #f5f5f5 solid 1px;

  &.act {
    border: red solid 1px;
  }
}
</style>
